<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-05 15:16:04
 * @LastEditTime: 2020-03-23 13:46:52
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        .data {
            margin-top: 5px;
        }

        .data .row {
            margin-top: 5px;
        }

        .sort {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;

            border-radius: 4px;
            margin-right: 5px;
        }

        .data .row .sub {
            color: #9e9e9e;
            font-size: 12px;
        }

        .data .row .sub-bold {
            font-weight: 700;
            color: #000;
        }

        .n-0 {
            background: #7d7d7d;
            color: #fff;
        }

        .n-1 {
            background: #caac12;
            color: #fff;
        }

        .n-2 {
            background: #3abd3f;
            color: #fff;
        }

        .n-3 {
            background: #346ea9;
            color: #fff;
        }

        .n-4 {
            background: #8013ab;
            color: #fff;
        }

        .rotate {
            width: 16px;
            vertical-align: middle;
            transform: rotate(180deg);
        }

        .b {
            font-weight: 700;
            color: #000;
        }

        .arrow {
            position: absolute;
            top: -10px;
            bottom: -10px;
            width: 40px;
            text-align: left;
            line-height: 44px;
        }
        .ov{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="补货客户列表" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click="showSearch = !showSearch">
                        <img src="../../image/search.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-with-bottom">
                <div class="content">
                    <van-tabs v-model="tabActive" @change="changeTab">
                        <van-tab :title="row.ARName || '未分配'" v-for="(row,rowIndex) in dataList">
                            <!-- <van-list v-model="listLoading1" :finished="listFinished1" finished-text="没有更多了"
                                @load="listOnLoad(1)"> -->
                            <div class="data">
                                <div class="row" v-for="(item,itemIndex) in row.node" @click="toggleChecked(item)">
                                    <van-cell>
                                        <div class="ov">
                                            <span class="arrow" @click.stop="toggleShow(item)">
                                                <img style="width: 16px;" src="../../image/retract.png"
                                                    :class="!item.isShow?'rotate':''" />
                                            </span>
                                            <span class="sort" :class="item.JHCS > 4?'n-4':'n-'+item.JHCS"
                                                style="margin-left: 40px;">{{itemIndex + 1}}</span>
                                            <span>{{item.ClientName}}</span>
                                        </div>
                                        <div slot="right-icon" v-if="item.checked">
                                            <van-checkbox v-model="item.checked" shape="square" slot="right-icon" />
                                        </div>
                                    </van-cell>
                                    <van-cell v-show="item.isShow">
                                        <van-row>
                                            <van-col :span="12">
                                                <div class="sub b">
                                                    <span>月销售额：</span>
                                                    <span>{{item.PJMoney}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub">
                                                    <span>活跃时间：</span>
                                                    <span>{{item.BSNSDate}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub">
                                                    <span>补货周期：</span>
                                                    <span>{{item.PDay}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub">
                                                    <span>本月销售：</span>
                                                    <span>{{item.BXSMoney}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub">
                                                    <span>上月销售：</span>
                                                    <span>{{item.SXSMoney}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub">
                                                    <span>上月同期：</span>
                                                    <span>{{item.TXSMoney}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub b">
                                                    <span>计划日期1：</span>
                                                    <span>{{item.JHDate1}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub b">
                                                    <span>计划日期2：</span>
                                                    <span>{{item.JHDate2}}</span>
                                                </div>
                                            </van-col>
                                            <van-col :span="12">
                                                <div class="sub b">
                                                    <span>已排次数：</span>
                                                    <span>{{item.JHCS}}</span>
                                                </div>
                                            </van-col>
                                        </van-row>
                                    </van-cell>
                                </div>
                            </div>

                            <!-- </van-list> -->
                        </van-tab>

                    </van-tabs>

                </div>
                <van-loading v-if="showLoading" />
            </div>
            <div class="bottom">
                <div class="bottom-left-label">
                    <span class="sort n-0"></span>0&nbsp;&nbsp;&nbsp;
                    <span class="sort n-1"></span>1&nbsp;&nbsp;&nbsp;
                    <span class="sort n-2"></span>2&nbsp;&nbsp;&nbsp;
                    <span class="sort n-3"></span>3&nbsp;&nbsp;&nbsp;
                    <span class="sort n-4"></span>4
                </div>
                <div class="bottom-right-button">
                    <van-button type="primary" block @click="selectArrayConfirm">确定</van-button>
                </div>
            </div>
        </div>

        <van-popup v-model="showSearch" round position="bottom">
            <div>
                <van-cell title="往来单位" :value="searchData.S_ClientName" is-link @click="openScreen(-1,10)">
                </van-cell>
            </div>
            <div class="btn-padding">
                <van-button type="primary" block style="border-radius: 0;" @click="searchList">查询</van-button>
            </div>
        </van-popup>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var branchData = api.pageParam.branchData;

        var selectPlan = api.pageParam.selectPlan;

        var selectDate = api.pageParam.selectDate;

        var userInfo = FLD.getUserInfo();

        api.addEventListener({
            name: 'selectArray'
        }, function (ret, err) {
            var selectType = ret.value.selectType;
            var type = ret.value.type;
            var array = ret.value.array;
            if (selectType == 10) {
                var name = [];
                var id = [];
                for (var i in array) {
                    var row = array[i];
                    name.push(row.name);
                    id.push(row.id);
                }
                vm.searchData.S_ClientID = id.join();
                vm.searchData.S_ClientName = name.join();
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: 0,
                showSearch: false,
                tabActive: 0,
                listLoading: false,
                dataList: [],
                searchData: {
                    S_ClientID: '',
                    S_ClientName: ''
                }

            },
            created: function () {
                this.getAreas();
            },
            methods: {
                changeTab(index, title) {
                    var that = this;
                    that.getList(that.dataList[index]);
                },
                toggleChecked(item) {
                    var that = this;
                    if (typeof item.checked === 'undefined') {
                        this.$set(item, 'checked', true);
                    } else {
                        item.checked = !item.checked;
                    }
                },
                toggleShow(item) {
                    var that = this;
                    if (typeof item.isShow === 'undefined') {
                        this.$set(item, 'isShow', true);
                    } else {
                        item.isShow = !item.isShow;
                    }
                },
                getAreas() {
                    var that = this;
                    FLD.ajax('APP_FDQYLBN', { S_NBranchID: branchData.id }, function (res) {
                        var f = [{
                            ARName: '全部',
                            node: []
                        }]
                        for (var i in res.ds) {
                            res.ds[i].node = [];
                        }
                        that.dataList = f.concat(res.ds);
                        that.getList(that.dataList[0]);
                    })
                },
                selectArrayConfirm() {
                    var that = this;
                    var checkArray = [];
                    for (var i in that.dataList) {
                        for (var j in that.dataList[i].node) {
                            if (that.dataList[i].node[j].checked) {
                                checkArray.push(that.dataList[i].node[j]);

                            }
                        }

                    }
                    if (checkArray.length) {

                        api.sendEvent({
                            name: 'selectSuccess',
                            extra: {
                                array: checkArray
                            }
                        });
                        api.closeWin();


                    } else {
                        layer.open({
                            content: '请至少选择一家客户!',
                            skin: 'msg',
                            time: 2
                        });
                    }
                },
                getList(row) {
                    var that = this;
                    if (row.node.length) return;
                    that.showLoading = true;



                    var obj = {
                        S_NBranchID: branchData.id,
                        S_BHID: selectPlan.BHID,
                        S_ClientID: that.tabActive == 0 ? that.searchData.S_ClientID : '',
                        S_DQDate: that.selectDate,
                        S_ARName: row.ARName == '全部' ? -123 : row.ARName
                    }
                    FLD.ajax('APP_DBHKHLT', obj, function (res) {
                        that.showLoading = false;
                        row.node = res.ds;
                    })

                },
                searchList() {
                    var that = this;
                    that.showSearch = false;
                    for (var i in that.dataList) {
                        that.dataList[0].node = [];
                    }
                    that.tabActive = [];
                    this.getList(that.dataList[0]);
                },
                openScreen(type, index) {
                    var obj = {
                        S_Type: index,
                        S_Cont: '',
                        S_BranchID: userInfo.S_BranchID,
                        S_SXZ: '',
                        S_StockID: userInfo.S_StockID,
                        S_CargoID: userInfo.S_CargoID,
                        S_BarCode: '',
                        S_PriceN: 0,
                        S_ProductID: 0
                    }

                    api.openWin({
                        name: '筛选' + index,
                        url: '../common/baseMultipleScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            filterData: obj,
                            type: type
                        }
                    })

                },

                onClickLeft() {
                    api.sendEvent({
                        name: 'setOrientation'
                    });
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>